<template>
  <div class="shrink-panel-contain">
    <div
        v-for="(item,index) in imgList"
        :style="{background: `url(${item.url}) no-repeat center / cover`}"
        class="shrink-panel-contain-image">
      <h3>转基因技术</h3>
      <div class="detail">
        转基因技术是现代生物技术的核心，运用转基因培育高产、优质、多抗、高效的新品种，能够降低农药、肥料投入，对缓解资源约束、保护生态环境、改善产品品质、拓展农业功能等具有重要作用。下一代转基因作物将以抗旱抗盐碱、有效利用氮磷钾肥为目标；从广大消费者的需要考虑，品质优、营养丰富、具有医疗保健功能的食品更是未来技术发展的重要方向。
      </div>
    </div>
  </div>
</template>

<script setup>


const props = defineProps({
  imgList: {
    type: Array,
    default: () => []
  },
})

</script>

<style scoped>
.shrink-panel-contain {
  width: 85%;
  display: flex;
  transition: all 0.3s;
  padding: 30px;
  margin: 0 auto;
}

.shrink-panel-contain-image {
  height: 35vh;
  width: 33.33%;
  transition: all 0.3s;
  position: relative;
  z-index: 1;
  margin: 0 10px;

  h3 {
    color: #fff;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    transition: all 0.3s;
  }

  .detail {
    color: #fff;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 50px;
    z-index: 4;
  }

  &::before {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 3;
  }

  &:hover {
    width: 50%;
  }

  &:hover h3 {
    transform: translatey(20px) scale(1.2);
    opacity: 0;
  }

  &:hover .detail {
    transform: translatey(-20px) scale(1.1);
    opacity: 1;
    transition: all 0.3s 0.3s;
  }

  &:hover::before {
    background: rgba(0, 179, 255, 0.4);
  }

}

</style>